基于react的MQ管理系统遇到的问题以及解决办法

跟一般的管理系统差不多

一、需求

1.新增申请和修改的弹窗里面的部门跟应用组改成下拉框，并调取后台接口获取到相应的值。1.1相应的代码 // 获取部门 getDepartment = () => { promiseAjax.get('/org/departments/findDeptList?level=4').then(res => { if (res.code === '0') { let productDeptObj = this.state.productDeptObj; res.data.forEach(item => { productDeptObj[item.id] = item; }); console.log(productDeptObj, 'q1111'); this.setState({productDept: res.data || [], productDeptObj}); } else { message.error(res.message); } }); }form表单里面 { productDept.map(item => {ß return {item.deptName}; }) } // 获取应用组 handleChangeProductDept = (id) => { const {setFieldsValue} = this.props.form; setFieldsValue({productGroupProduct: undefined}); promiseAjax.get(`/org/thirdparty/dept/group?id=${id}&level=5`).then(res => { if (res.code === '0') { let productGroupObj = this.state.productGroupObj; res.data.forEach(item => { productGroupObj[item.id] = item; }); this.setState({productGroup: res.data, productGroupObj}); } else { message.error(res.message); } }); }form表单里面 { productGroup.map(item => { return {item.name}; }) }

在state里面声明productDept：[],productGroup:[],请求成功this.setState({productGroup/productDept:res.data}); 在表单中分别遍历两个数组

获取部门数据后台参数 data: [{id: "1231648600", deptName: "商户事业部"}, {id: "1746345310", deptName: "综合管理部"},…] 0: {id: "1231648600", deptName: "商户事业部"} 1: {id: "1746345310", deptName: "综合管理部"} 2: {id: "1879685755", deptName: "研发部"} 3: {id: "1889850226", deptName: "人事行政部"} 4: {id: "688950687", deptName: "财务部"} 此时item是data的每一组对象，也就是01234中的所有值，所以展示出来的部门名称是item.deptName，此时的value是item.id

获取应用组数据后台参数 data: [{id: "1388050926", name: "招聘组"}, {id: "1311206076", name: "发展组"}] 0: {id: "1388050926", name: "招聘组"} 1: {id: "1311206076", name: "发展组"} 此时的item同上，所以展示出来的应用组名称是item.name,此时的value 是item.id

二、遇到的问题以及解决办法1.在向后台传递参数的时候，后台需要4个参数，分别是部门名称、部门id、应用组名称、应用组id，而此时表单中获取到的是部门id和应用组id，所以我们必须通过这个id去获取到对应的name，但是通过后台传递的数据可以看出id和name是同级并列的，看似没有任何关系，那么如何获取以部门为例：我们可以知道现在id和deptName是包在同一个对象里面的，那么首先我声明一个空的对象producDeptObj{},

然后在获取部门的方法里遍历 res.data.forEach(item => { productDeptObj[item.id] = item; 将数组的整体赋给id，此时的id里面包含id和deptName, 接下来如果想获取到name 只需productDeptObj[item.id].name就可以了。 });

在点击提交的时候 const department = this.state.productDeptObj[fieldsValue.department1].deptName; // 获取到部门名称 const department = this.state.productDeptObj[values.department1] ? this.state.productDeptObj[fieldsValue.department1].deptName : ''; // 做一个判断，如果后台数据有问题 为了防止报错，先判断一下 this.state.productDeptObj[values.department1]是否可以取到， 如果可以再去取对应的name，如果取不到就返回一个空。注意⚠️this.state.productDeptObj[values.department1] 之所以可以用this.state可以取到 productDeptObj，是因为在获取部门的方法里面 setState了productDeptObj this.setState({productDept: res.data || [], productDeptObj});

以上是我在做项目的时候遇到的问题，可能很简单，但是当时也是把自己难住了，希望可以帮助遇到以上问题的小伙伴们，第一次写博客还有很多不足之处，希望多多包涵！